import React, { PureComponent, Fragment } from 'react';
import styles from './homePage.less';
import { Row, Col, Alert, Empty, Carousel, Typography } from 'antd';
import { connect } from 'dva';
import party from './../../images/safe.png';
import safe_top from './../../images/safe_top.jpg';
import red_list_blue from './../../images/red_list_blue.gif';
import request from '@/utils/request';

const { Paragraph } = Typography;

@connect(({ devices, loading }) => ({
  devices,
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: true,
      readList:localStorage.getItem('readList')?JSON.parse(localStorage.getItem('readList')):[],
      sylb:[],
      aqyw:[],
      zcfg:[],
      aqjy:[],
      sgtb:[],
      aqtz:[],
      counters:0,
    };
  }


  componentDidMount() {
    request(`/counters/safety_homepage`, {
      method: 'GET',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          counters:response.data.data.count
        });
      }
    });
    const that = this;
    let articleMap=['','sylb','aqyw','zcfg','aqjy','sgtb','aqtz']
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:21,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[1]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:22,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[2]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:23,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[3]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:24,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[4]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:25,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[5]]: response.data.data,
        });
      }
    });
    request(`/articles`, {
      method: 'GET',
      params:{
        order_direction:'desc',
        type:25,
        per_page:10
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          [articleMap[6]]: response.data.data,
        });
      }
    });

  }

  saveRead=(item)=>{
    if(this.state.readList.indexOf(item.id)<0){
      let readList = [...this.state.readList]
      readList.push(item.id)
      const that=this;
      setTimeout(function() {
        that.setState({
          readList:readList
        },function() {
          localStorage.setItem('readList',JSON.stringify(that.state.readList))
        })
      },0)


    }
  }

  render() {
    const username = sessionStorage.getItem('username');
    const { dispatch } = this.props;
    const pathname=this.props.history.location.pathname
    let  regex = /(<([^>]+)>)/ig;
    return <div style={{width:'100%',background:'#0f92d6'}}>
      <div

        style={{ background:'#fff',verflow: 'auto',position:'relative', padding:'15px', maxWidth: 1100, margin: '0 auto' }}>
        {pathname==='/safety_product_homepage'?'':<h3  onClick={()=>{
          window.open(`http://${window.location.host}/safety_product_homepage`);
        }} style={{textAlign:'right',cursor:'pointer',color:'#3c67f5',position:"absolute",right:'25px',top:'20px',fontWeight:'bold'}}>新窗口打开</h3>}
        <div>
          <img style={{ width: '100%', height: 'auto' }} src={safe_top} alt=""/>
        </div>
        <Row gutter={16}>

          <Col className="gutter-row" span={12}>
            <div className={styles.home_info_box}>
              <div className={styles.home_info_title} style={{borderColor:'#3c67f5'}}>
                <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>安全要闻</div>
                <img className={styles.home_info_more}
                     onClick={()=>{
                       window.open(`http://${window.location.host}/safety_list/22`);
                     }}
                     src="https://demo.fanpusoft.com/res/themes/Custom_Default/more_bg.gif" alt=""/>
              </div>
              <div className={styles.home_info_content}>
                {this.state.aqyw.map((item,index)=>{
                  if(index===0){

                    return <div key={index} style={{ padding: '0 15px' }}>
                      <h3 onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} style={{ cursor:'pointer',textAlign: 'center', fontWeight: 'bold' ,fontSize:'20px',marginBottom:'2px',
                        color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.title}</h3>
                      <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: '0px !important', textIndent: '2em' }}>
                        {item.content.replace(regex, "")}
                      </Paragraph>
                    </div>
                  }else{
                    return  ''
                  }
                })}

                <div className={styles.home_info_content}>
                  {this.state.aqyw.map((item,index)=>{
                    if(0<index&&index<7){
                      return <div  key={index} className={styles.home_info_item2}>
                        <div className={styles.item_img}>
                          <img src={red_list_blue} alt=""/>
                        </div>
                        <div onClick={()=>{
                          this.saveRead(item)
                          window.open(`http://${window.location.host}/safety_article/${item.id}`);
                        }} className={styles.item_content} style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                          style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                        </div>
                        <div className={styles.item_data}>{item.date}</div>
                      </div>
                    }else{
                      return  ''
                    }
                  })}
                </div>
                {
                  this.state.aqyw.length===0&&
                  <div className={styles.home_info_content}>
                    <div className={styles.empty}>
                      <Empty/>
                    </div>
                  </div>
                }


              </div>
            </div>
          </Col>
          <Col className="gutter-row" span={12}>
            <div className={styles.home_info_box}>
              {
                this.state.sylb.length!==0&&
                <Carousel autoplay={true} effect={'fade'}>
                  {this.state.sylb.map((item,index)=>{
                    if(index<5){
                      return   <div key={index} onClick={()=>{

                      }} className={styles.carousel_item} style={{height:'350px'}}>
                        <img onClick={()=>{
                          window.open(`http://${window.location.host}/safety_article/${item.id}`);
                        }} className={styles.carousel_img}
                             src={item.cover_image_path} alt=""/>
                        <h3 className={styles.carousel_title}>{item.title}</h3>
                      </div>
                    }else{
                      return  ''
                    }
                  })}
                </Carousel>
              }
            </div>
          </Col>
          <Col className="gutter-row" span={8}>
            <div className={styles.home_info_box}>
              <div className={styles.home_info_title} style={{borderColor:'#3c67f5'}}>
                <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>政策法规</div>
                <img className={styles.home_info_more}
                     onClick={()=>{
                       window.open(`http://${window.location.host}/safety_list/23`);
                     }}
                     src="https://demo.fanpusoft.com/res/themes/Custom_Default/more_bg.gif" alt=""/>
              </div>
              <div className={styles.home_info_content}>
                {this.state.zcfg.map((item,index)=>{
                  if(index<8){
                    return <div  key={index} className={styles.home_info_item2}>
                      <div className={styles.item_img}>
                        <img src={red_list_blue} alt=""/>
                      </div>
                      <div onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} className={styles.item_content}  style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                        style={{ color: '#0068cd' }}>[{item.tag}] </span>} {item.title}
                      </div>
                      <div className={styles.item_data}>{item.date}</div>
                    </div>
                  }else{
                    return  ''
                  }
                })}
              </div>
              {
                this.state.zcfg.length===0&&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
            </div>
          </Col>
          <Col className="gutter-row" span={8}>
            <div className={styles.home_info_box}>
              <div className={styles.home_info_title} style={{borderColor:'#3c67f5'}}>
                <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>安全教育</div>
                <img className={styles.home_info_more}
                     onClick={()=>{
                       window.open(`http://${window.location.host}/safety_list/24`);
                     }}
                     src="https://demo.fanpusoft.com/res/themes/Custom_Default/more_bg.gif" alt=""/>
              </div>
              <div className={styles.home_info_content}>
                {this.state.aqjy.map((item,index)=>{
                  if(index<8){
                    return <div  key={index} className={styles.home_info_item2}>
                      <div className={styles.item_img}>
                        <img src={red_list_blue} alt=""/>
                      </div>
                      <div onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} className={styles.item_content}  style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                        style={{ color: '#0068cd' }}>[{item.tag}] </span>} {item.title}
                      </div>
                      <div className={styles.item_data}>{item.date}</div>
                    </div>
                  }else{
                    return  ''
                  }
                })}
              </div>
              {
                this.state.aqjy.length===0&&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
            </div>
          </Col>
          <Col className="gutter-row" span={8}>
            <div className={styles.home_info_box}>
              <div className={styles.home_info_title} style={{borderColor:'#3c67f5'}}>
                <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>事故通报</div>
                <img className={styles.home_info_more}
                     onClick={()=>{
                       window.open(`http://${window.location.host}/safety_list/25`);
                     }}
                     src="https://demo.fanpusoft.com/res/themes/Custom_Default/more_bg.gif" alt=""/>
              </div>
              <div className={styles.home_info_content}>
                {this.state.sgtb.map((item,index)=>{
                  if(index<3){
                    return <div key={index} style={{display:'flex',padding:'8px 12px'}}>
                      <div onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} style={{cursor:'pointer',width:'120px',height:'auto',overflow:'hidden',marginRight:'10px',borderRadius:'3px'}}>
                        <img style={{width:'100%',height:'80px'}} src={item.cover_image_path} alt=""/>
                      </div>
                      <div style={{flex:'1'}}>
                        <h3 onClick={()=>{
                          this.saveRead(item)
                          window.open(`http://${window.location.host}/safety_article/${item.id}`);
                        }}  style={{cursor:'pointer',width:'100%',overflow:'hidden',height:'23px',fontWeight:'bold',marginTop:'2px',
                          color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}
                           >{item.title}</h3>
                        <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: '0px !important'}}>
                          {item.content.replace(regex, "")}
                        </Paragraph>
                      </div>
                    </div>
                  }else{
                    return  ''
                  }
                })}
              </div>
              {
                this.state.sgtb.length===0&&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }
            </div>
          </Col>
        </Row>
        <div style={{marginTop:'16px'}}>
          <img style={{ width: '100%', height: 'auto' }} src={safe_top} alt=""/>
        </div>
        <Row gutter={16}>
          <Col className="gutter-row" span={24}>
            <div className={styles.home_info_box}>
              <div className={styles.home_info_title} style={{borderColor:'#3c67f5'}}>
                <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>安全通知</div>
                <img className={styles.home_info_more}
                     onClick={()=>{
                       window.open(`http://${window.location.host}/safety_list/26`);
                     }}
                     src="https://demo.fanpusoft.com/res/themes/Custom_Default/more_bg.gif" alt=""/>
              </div>
              <div className={styles.home_info_content}>
                {this.state.aqtz.map((item,index)=>{
                  if(index<8){
                    return <div  key={index} className={styles.home_info_item2}>
                      <div className={styles.item_img}>
                        <img src={red_list_blue} alt=""/>
                      </div>
                      <div onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} className={styles.item_content}  style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                        style={{ color: '#0068cd' }}>[{item.tag}] </span>} {item.title}
                      </div>
                      <div className={styles.item_data}>{item.date}</div>
                    </div>
                  }else{
                    return  ''
                  }
                })}
              </div>
              {
                this.state.aqtz.length===0&&
                <div className={styles.home_info_content}>
                  <div className={styles.empty}>
                    <Empty/>
                  </div>
                </div>
              }

            </div>
          </Col>


        </Row>
        <div style={{textAlign:'center',marginTop:'10px'}}>本页已阅读 : {this.state.counters}次</div>
      </div>
    </div>


  }
}

export default BasicList;
